<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      body, html,#allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin:0;
        font-family:"微软雅黑";
      }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=oyva8hEbGyySeHenlvpaPYgbblTWU2mA"></script>
    <title>地图展示</title>
  </head>
  <body>
    <div id="allmap"></div>
  </body>
</html>
<script type="text/javascript">
  // 创建地图实例
  var map = new BMapGL.Map("allmap");
  // 创建坐标对象
  var point = new BMapGL.Point(116.404, 39.915);
  // 指定中心点和展示级别
  map.centerAndZoom(point, 15);
  // 开启鼠标滚轮缩放
  map.enableScrollWheelZoom(true);

  // 地址解析器对象
  var myGeo = new BMapGL.Geocoder();
  // 驾车路线解析对象
  var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
  // 步行路线解析对象
  var walking = new BMapGL.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
            
  myGeo.getPoint('深圳市宝安区西部硅谷', (point) => {
    if (point) {
      myGeo.getPoint('深圳市宝安区宝安中心', (point2) => {
        if (point2) {
          // 基础驾车路线
          driving.search(point, point2);
          // 步行路线
          walking.search('深圳市宝安区西部硅谷', '深圳市火车北站');
        }
      })
    }
  })

</script>
